<div class="contents">
  <h2 class="title text-center pt-3 pb-3 text-littleGray">责任清单</h2>
  <div class="header pt-2 pb-2">
    <div class="button" style="width: 100%">
      <button
        routerLink="/home/double/my-checklist/add"
        pButton type="button" label="新增责任清单" style="float: right"
        class="ui-button-rounded ui-corner-left"
        >
      </button>
    </div>
  </div>
  <div class="content">
    <p-table
      [value]="items" [columns]="tableHeader"
      [scrollable]="true" scrollHeight="90%"
    >
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th>序号</th>
          <th *ngFor="let col of columns">
            {{col.header}}
          </th>
          <th>操作</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
        <tr>
          <td>{{rowIndex}}</td>
          <td *ngFor="let col of columns">
            {{rowData[col.field]}}
          </td>
          <td>
            <button pButton label="查看" class="ui-button-rounded mr-3"
                    (click)="detail(rowData)"></button>
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
  <div class="pagination">
    <app-pagination [option]="pageOption" (clickEvent)="contentsPageEvent($event)"></app-pagination>
  </div>

  <p-dialog
    [closable]="true"
    [blockScroll]="true"
    header="详情"
    [(visible)]="displayDetail" [style]="{width: '80vw'}"
  >
    <div class="ui-g-12 doubleDutyEvaluationContents" *ngFor="let content of item?.doubleDutyEvaluationContents; let i = index">
      <div class="ui-g-12">
        <p>{{i +1}} .（{{content.fraction}}分）{{content.content}}</p>
      </div>
      <div class="ui-g-12">
        <div class="ui-g-9">
          <h5>自评内容&nbsp;</h5>
          <input disabled type="text" pInputText [(ngModel)]="content.selfEvaluation">
        </div>
        <div class="ui-g-3">
          <h5>自评得分</h5>
          <input disabled style="max-width: 120px" type="text" pInputText [(ngModel)]="content.selfFraction">
        </div>
      </div>
      <div class="ui-g-12" *ngIf="(item?.status + '') === '3'">
        <div class="ui-g-9">
          <h5>检查结果&nbsp;</h5>
          <input disabled type="text" pInputText [(ngModel)]="content.checkResult">
        </div>
        <div class="ui-g-3">
          <h5>检查得分</h5>
          <input disabled style="max-width: 120px" type="text" pInputText [(ngModel)]="content.checkFraction">
        </div>
      </div>
    </div>
    <div class="ui-g-12 doubleDutyEvaluationContents" *ngIf="(item?.status + '') === '3'">
      <div class="ui-g-12">
        <h5>未履职情况&nbsp;</h5>
        <input disabled type="text" pInputText [value]="item?.badSituation">
      </div>
      <div class="ui-g-12">
        <h5>纠正与考核情况</h5>
        <input disabled type="text" pInputText [value]="item?.correctSituation">
      </div>
    </div>
  </p-dialog>
</div>
